<template>
  <div class="pay">
    <nav-bar :title="title" :left-arrow="true"></nav-bar>
    <div class="carMessage">
      <van-cell-group>
        <van-cell title="车辆名称" :value="list.type" />
        <van-cell title="牌照" :value="list.licensePlate" />
        <van-cell title="起步价" :value="list.startPrice" />
        <van-cell title="金额" :value='money + "元"' />
      </van-cell-group>
    </div>
    <div class="coupon" v-if="hasCoupon">
      <div class="content">
        <p>选择优惠卷</p>
        <van-field name="radio">
          <template #input>
            <van-radio-group v-model="radio">
              <van-radio :name="item.couponId" v-for="item in couponList" :key="item.couponId">
                <div class="couponBox">
                  <span>
                    优惠卷名称：{{item.title}}
                  </span>
                  <span>
                    {{item.effectiveTime}}
                  </span>
                  <span>
                    详情：{{item.detail}}
                  </span>
                </div>
              </van-radio>
            </van-radio-group>
          </template>
        </van-field>
      </div>
    </div>
    <div class="bottom">
        <van-tabbar>
          <van-tabbar-item class="left" @click="pay">
            支付
          </van-tabbar-item>
          <van-tabbar-item @click="cancel">
            取消
          </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar'
import { myCoupon, pay } from '@/api/mine'
import { mapGetters } from 'vuex'
import { getCarById } from '@/api/car'
export default {
  name: 'Pay',
  components: {
    NavBar
  },
  data () {
    return {
      title: '支付',
      couponList: [],
      radio: '',
      hasCoupon: false,
      list: {},
      carId: 0,
      money: 0
    }
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  created () {
    this.carId = this.$route.carId
    this.getMyCoupon()
    this.getCar()
    this.getPayList()
    this.toPay()
  },
  methods: {
    getPayList () {
      this.getCar()
    },
    async getCar () {
      this.carId = this.$route.query.carId
      const { data: res } = await getCarById(this.carId)
      console.log(res)
      this.list = res.data
    },
    async getMyCoupon () {
      const params = {
        userId: this.userInfo.userId
      }
      const { data: res } = await myCoupon(params)
      res.data.forEach(item => {
        if (item.effective === false) {
          this.couponList.push(item)
        }
      })
      console.log(this.couponList)
      if (this.couponList.length !== 0) {
        this.hasCoupon = true
      }
    },
    cancel () {
      this.$router.go(-1)
    },
    async pay () {
      const params = {
        payFlag: '1',
        couponId: this.radio,
        userId: this.userInfo.userId,
        carId: parseInt(this.carId),
        curFlag: '1'
      }
      const { data: res } = await pay(params)
      if (res.meta.status === 200) {
        this.$notify({ type: 'success', message: '支付成功, 页面即将跳转' })
        this.toPayZfb()
        // setTimeout(() => {
        //   this.$router.push('/home')
        // }, 1000)
      }
      console.log(res)
    },
    async toPayZfb () {
      const viewUrl = 'http://localhost:8080/home'
      // console.log(typeof this.money)
      let money = this.money - 0
      // money = money.toFixed(2)
      money = 0.50
      const name = '汽车支付'
      const detail = '汽车支付'
      window.location.href = `http://localhost:8082/toPay?viewUrl=${viewUrl}&money=${money}&name=${name}&detail=${detail}`
    },
    async toPay () {
      const params = {
        payFlag: '0',
        couponId: '',
        userId: this.userInfo.userId,
        carId: parseInt(this.carId),
        curFlag: '1'
      }
      const { data: res } = await pay(params)
      this.money = res.data.money
      console.log(this.money)
    }
  }
}
</script>

<style scoped lang='scss'>
.coupon{
  padding: 20px;
  p{
    padding-left: 20px;
    font-size: 18px;
    font-weight: bolder;
    color: #0bbef5;
  }
  .content{
    border: 1px solid aquamarine;
    height: 350px;
    background-color: white;
    overflow: scroll;
    .couponBox{
      width: 240px;
      height: 100px;
      border-radius: 10px;
      background-color: aquamarine;
      color: white;
      padding: 10px;
      span{
        display: block;
        line-height: 30px;
      }
    }
  }
}
.van-radio{
  margin-top: 15px;
}
.left{
  background: #0bbef5;
  color: #fff;
}
</style>
